<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javaScript" src="${pageContext.request.contextPath}/js/jquery-3.5.0.min.js"></script>
</head>
<body>
    <form action="">
        用户名：<input type="text" name="name" id="name" /><br> 
        密码：<input type="password" name="password" id="password" /> <br> 
        年龄：<input type="text" name="page" id="page"><br> 
        <input type="button" value="测试" onclick="testJson()" />
    </form>
</body>
<script type="text/javaScript">
    function testJson() {
        //获取输入的值pname为id
        alert($("#name").val());
        var name = $("#name").val();
        var password = $("#password").val();
        var page = $("#page").val();
        $.ajax({
            //请求路径
            url : "${pageContext.request.contextPath }/testJson",
            //请求类型
            type : "post",
            //data表示发送的数据
            data : JSON.stringify({
                name : name,
                password : password,
                page : page
            }), //定义发送请求的数据格式为JSON字符串
            contentType : "application/json;charset=utf-8",
            //定义回调响应的数据格式为JSON字符串，该属性可以省略
            dataType : "json",
            //成功响应的结果
            success : function(data) {
                if (data != null) {
                    alert("输入的用户名：" + data.name + "，密码：" + data.password
                            + "， 年龄：" + data.page);
                }
            }
        });
    }
</script>
</html>